<!--
 * @Author: your name
 * @Date: 2020-08-02 14:09:07
 * @LastEditTime: 2020-10-18 15:22:59
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \project\羊绒产业园\源码\src\components\common\cell.vue
-->
<template>
  <div class="cell-box flex space-between" @click="jump(ListData)">
    <van-image
      width="1.2rem"
      fit="cover"
      height="1.2rem"
      :src="ListData.pictureUrl"
    />
    <div class="des">
      <div class="title flex space-between">
        <div class="title-left">
          {{ ListData.infoTypeName3 }}
        </div>
        <div class="title-right flex">
          <!-- 已发布 -->
          <template v-if="Type === 1" class="flex">
            <p class="btn-refresh" @click.stop="refresh">
              <van-icon name="replay" />刷新
            </p>
            <p class="btn btn-buy" @click.stop="buy(ListData.issueId)">成交</p>
          </template>
          <!-- end -->
          <!-- 已成交 -->
          <template v-if="Type === 2">
            <p class="btn btn-buy" @click.stop="send(ListData.issueId)">重新发布</p>
          </template>
          <!-- end -->
        </div>
      </div>
      <p class="span">
        <span>数量：{{ ListData.stock ? ListData.stock : '0' }}吨</span>
        <span v-if="ShowPrice">价格: <i class="price">￥{{ ListData.unitPrice }}</i> 元</span>
      </p>
    </div>
  </div>
</template>

<script>
import { Toast, Popup, Picker, Search, Loading, Dialog, Empty } from "vant";
import { mapState } from "vuex";

export default {
  props: {
    ListData: {
      type: Object,
      default: () => {}
    },
    Type: {
      type: Number,
      default: 1 //1 发布中 2已成交  3已过期
    },
    ShowPrice: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
     
    };
  },
   computed: {
    ...mapState(["userInfo"])
  },
  methods: {
    // 刷新
    refresh() {
      let _this = this;
      _this.$emit('refresh','')
    },
    // 成交
    buy(issueId) {
      let _this = this;
      Dialog.confirm({
        title: "提示",
        message: "确定成交吗？"
      })
        .then(() => {
          // on confirm
          _this.finish(issueId)
        })
        .catch(() => {
          // on cancel
        });
    },
  // 关闭交易
        finish(issueId) {
      let _this = this;
      let _param = {
         "issueId": issueId,
         "type":1,
         userId: _this.userInfo.userId,
        
          
      }
      this.$ajax
        .post(`${this.$baseUrl}/portal/issues/colseTheDeal`, _param)
        .then(function(res) {
          if (res.data.code == 200) {
           _this.$emit('getData')
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
     // 重新发布
    send(issueId) {
       let _this = this;
      let _param = {
         "issueId": issueId,
         userId: _this.userInfo.userId,
        
          
      }
      this.$ajax
        .post(`${this.$baseUrl}/portal/issues/reIssue`, _param)
        .then(function(res) {
          if (res.data.code == 200) {
            _this.$emit('getData')
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
     jump(data) {
      
      this.$router.push({name: `orderDetail`,params:{id:data.detailId,issueId:data.issueId}});
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.cell-box {
  border-radius: 5px;
  padding: 0.3rem;
  box-sizing: border-box;
  background: #fff;
  font-size: 0.3rem;
  border-bottom: 1px solid #eee;
  color: #999;
  /deep/ .van-image {
    img {
      border-radius: 6px;
    }
  }
  .des {
    flex: 1;
    padding-left: 0.2rem;
    color: #999;
    text-align: left;
    font-size: 0.24rem;
    .title {
      font-size: 0.3rem;
      color: #333;
      .title-left {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        flex: 1;
        padding-right: 0.2rem;
      }
         .title-right {
      font-size: 0.28rem;
      color: #5bbd97;
      .btn-refresh {
        color: #999;
        margin-right: .1rem!important;
      }
      .btn {
        padding: 2px 0.15rem;
        border-radius: 10px;
        background: #5bbd97;
        color: #fff;
        margin-left: 0.2rem;
      }
      
    }
    }
    .span {
      padding-top: 0.1rem;
      span {
        padding-right: 0.3rem;
        &:last-child {
          padding-right: 0;
        }
        .price {
          color: #ee0a24;
        }
      }
    }
 
  }
}
</style>
